<template>
  <div class="app-container">
    <el-form :rules="rules" ref="dataForm" :model="tempServer" label-width="120px">
      <el-form-item label="Server Name" prop="server_name">
          <el-input :disabled="type == 'update'" v-model="tempServer.server_name"></el-input>
        </el-form-item>
        <el-form-item label="Server CPU"  prop="cpu">
          <el-input v-model="tempServer.cpu"></el-input>
        </el-form-item>
        <el-form-item label="Memory"  prop="memory">
          <el-select class="filter-item" v-model="tempServer.memory" placeholder="select memory">
            <el-option v-for="item in  memorySize" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Hard Disk"  prop="hard_disk">
          <el-input v-model="tempServer.hard_disk"></el-input>
        </el-form-item>
      <el-form-item label="Applicant">
        <el-input disabled v-model="tempServer.applicant_name"></el-input>
      </el-form-item>
      <el-form-item label="Status">
          <el-select disabled class="filter-item" v-model="tempServer.status" >
            <el-option v-for="item in  statusList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="Remarks">
        <el-input type="textarea" v-model="tempServer.remarks"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="blockCreate" type="primary" @click="createData">Create</el-button>
        <el-button  @click="onCancel">Return</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { createServer, checkServerName } from '@/api/server'

import { getInfo } from '@/api/user'

export default {
  data() {
    var validateServerName = (rule, value, callback) => {
      if (this.tempServer.server_name === '') {
        callback(new Error('server name is required'))
      }
      checkServerName(this.tempServer.server_name).then(res => {
        if (res === true) {
          callback()
        } else {
          callback(new Error('server name is unvalidate, please retry'))
        }
      })
    }
    return {
      tempServer: {
        server_name: '',
        cpu: '',
        memory: '',
        hard_disk: '',
        remarks: '',
        applicant_name: '',
        status: ''
      },
      blockCreate: false,
      type: 'create',
      rules: {
        server_name: [{ required: true, validator: validateServerName, trigger: 'blur' }],
        cpu: [{ required: true, message: 'cpu is required', trigger: 'change' }],
        memory: [{ required: true, message: 'memory is required', trigger: 'blur' }],
        hard_disk: [{ required: true, message: 'hard disk is required', trigger: 'change' }]
      },
      memorySize: ['4G', '8G', '10G', '16G', '20G', '24G', '32G', '64G', '128G'],
      statusList: ['edit', 'approving', 'approved', 'rejected']
    }
  },
  created() {
    if (this.$route.params.type == 'update') {
      this.tempServer = this.$route.params.server
      this.type = this.$route.params.type
    } else {
      getInfo().then( response => {
          this.tempServer.status = 'edit'
          this.tempServer.applicant_name= response.user.user_name
      })
    }
  },
  methods: {
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          checkServerName(this.tempServer.server_name).then(res => {
            if (res !== true) {
              this.$notify({
                title: 'Failed',
                message: 'Server Name is eixstsed, please retry!',
                type: 'error',
                duration: 2000
              })
            } else {
              createServer(this.tempServer).then(() => {
                this.type = 'update'
                this.$notify({
                  title: 'success',
                  message: 'create Server success!',
                  type: 'success',
                  duration: 2000
                })
                this.blockCreate = true
              })
            }
          })
        }
      })
    },
    onCancel() {
      this.$refs['dataForm'].resetFields()
      this.$notify({
        title: 'Return',
        message: 'Return to query',
        type: 'success',
        duration: 2000
      })
      this.$router.push({
        name: 'My Application', params: {
        }
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

